<%--
  Created by IntelliJ IDEA.
  User: 天天好心情
  Date: 2024/10/23
  Time: 20:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue--%>
    <script src="../js/vue.js"></script>
    <%--引入axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <%--新增角色按钮--%>
    <el-button type="success" @click="dialogVisibleAdd = true"><i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;新增表格
    </el-button>
    <%--点击添加时的对话框--%>
    <el-dialog
            title="新增角色"
            :visible.sync="dialogVisibleAdd"
            width="30%"
            @close="closeAdd"
            :before-close="handleClose">
        <span>
            <el-form ref="addForm" :rules="rules" :model="addForm" label-width="80px">
                  <el-form-item label="角色名" prop="rolename">
                  <el-input v-model="addForm.rolename"></el-input>
                  </el-form-item>
                  <el-form-item label="角色描述" prop="remark">
                  <el-input v-model="addForm.remark"></el-input>
                  </el-form-item>
                  <el-form-item label="角色状态" prop="status">
                  <el-select v-model="addForm.status" placeholder="请选择活动区域">
                      <el-option label="启用" value="1"></el-option>
                      <el-option label="禁用" value="0"></el-option>
                  </el-select>
                  </el-form-item>
            </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleAdd = false">取 消</el-button>
    <el-button type="primary" @click="okAdd">确 定</el-button>
  </span>
    </el-dialog>
    <%--刷新表格按钮---%>
    <el-button type="info" @click="refresh"><i class="el-icon-refresh"></i>&nbsp;&nbsp;刷新表格</el-button>
    <%--主页面显示所有角色数据--%>
    <template>
        <el-table
                :data="roles"
                border
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="roleid"
                    label="ID">
            </el-table-column>
            <el-table-column
                    prop="rolename"
                    label="角色名">
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="角色描述">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    prop="status"
                    label="状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status==='1'" type="success">启用</el-tag>
                    <el-tag v-else type="info">禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="380">
                <template slot-scope="scope">
                    <el-button size="medium" type="primary" @click="beginUpdate(scope.row.roleid)" round><i
                            class="el-icon-edit"></i>&nbsp;&nbsp;编辑
                    </el-button>
                    <el-button size="medium" type="danger" @click="deleteRole(scope.row.roleid)" round><i class="el-icon-delete"></i>&nbsp;&nbsp;删除
                    </el-button>
                    <el-button size="medium" type="warning" round @click="beginUpdateRole(scope.row.roleid)"><i
                            class="el-icon-user"></i>&nbsp;&nbsp;修改权限
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <%--修改角色对话框--%>
    <el-dialog
            title="修改角色"
            :visible.sync="dialogVisibleUpdate"
            width="30%"
            :before-close="handleClose">
        <span>
            <el-form ref="updateForm" :rules="rules" :model="updateForm" label-width="80px">
                  <el-form-item label="角色名" prop="rolename">
                  <el-input v-model="updateForm.rolename"></el-input>
                  </el-form-item>
                  <el-form-item label="角色描述" prop="remark">
                  <el-input v-model="updateForm.remark"></el-input>
                  </el-form-item>
                  <el-form-item label="角色状态" prop="status">
                  <el-select v-model="updateForm.status" placeholder="请选择活动区域">
                      <el-option label="启用" value="1"></el-option>
                      <el-option label="禁用" value="0"></el-option>
                  </el-select>
                  </el-form-item>
            </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleUpdate = false">取 消</el-button>
    <el-button type="primary" @click="okUpdate()">确 定</el-button>
  </span>
    </el-dialog>
    <%--分页功能--%>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,7,10,15]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <%--点击修改权限时显示的树状图对话框--%>
    <el-dialog
            title="修改权限"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <el-tree
                :data="data"
                ref="tree"
                show-checkbox
                node-key="mid"
                :default-checked-keys="defaultCheckedKeys"
                :props="defaultProps">
        </el-tree>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="okUpdateRole()">确 定</el-button>
  </span>
    </el-dialog>
</div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            roles: undefined,//角色数据
            currentPage: 1,//当前页码
            pageSize: 5,//每页显示的记录数
            total: 0,//总记录数
            dialogVisible: false, //显示修改权限对话框
            data: [],//树形菜单数据
            defaultCheckedKeys: [],//默认选中的节点
            defaultProps: {
                children: 'children',
                label: 'mname'
            },//树形菜单的子属性
            roleid: 0,//当前角色id
            dialogVisibleAdd: false,//显示新增角色对话框
            addForm: {},//新增角色表单
            rules: {
                rolename: [
                    {required: true, message: '请输入角色名', trigger: 'blur'},
                ],
                remark: [
                    {required: true, message: '请输入角色描述', trigger: 'blur'},
                ],
                status: [
                    {required: true, message: '请选择角色状态', trigger: 'change'},
                ]
            },//新增角色表单验证
            dialogVisibleUpdate: false,//显示修改角色对话框
            updateForm: {},//修改角色表单
        },
        created() {
            this.selectByPage();
        },
        methods: {
            //表格中行的样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 4 === 1) {
                    return 'warning-row';
                } else if (rowIndex % 4 === 3) {
                    return 'success-row';
                }
                return '';
            },
            //以分页形式显示页面
            selectByPage() {
                axios.get("/role/selectByPage?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize).then(resp => {
                    if (resp.data.code === 200) {
                        this.roles = resp.data.data.list;
                        this.total = resp.data.data.total;
                    }
                })
            },
            // 改变每页显示的条数
            handleSizeChange(val) {
                this.pageSize = val;
                this.selectByPage();
            },
            // 改变当前页
            handleCurrentChange(val) {
                this.currentPage = val;
                this.selectByPage();
            },
            //关闭对话框
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            //点击修改权限时显示的树状图对话框
            beginUpdateRole(roleid) {
                this.dialogVisible = true;
                this.roleid = roleid;
                axios.get("/menu/selectByRoleId?roleid=" + roleid).then(resp => {
                    if (resp.data.code === 200) {
                        this.data = resp.data.data.firstMenus;
                        this.defaultCheckedKeys = resp.data.data.menuIds;
                    }
                })
            },
            //确认修改
            okUpdateRole() {
                let checkedKeys = this.$refs.tree.getCheckedKeys();
                console.log(checkedKeys);
                axios.post("/menu/updateRoleMenu?roleid=" + this.roleid + "&checkedKeys=" + checkedKeys).then(resp => {
                    if (resp.data.code === 200) {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.dialogVisible = false;
                    }
                })
            },
            //添加角色
            okAdd() {
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        axios.post("/role/add", this.addForm).then(resp => {
                            if (resp.data.code === 200) {
                                this.$message({
                                    message: '添加成功',
                                    type: 'success'
                                });
                                this.dialogVisibleAdd = false;
                                this.selectByPage();
                            }
                        })
                    } else {
                        return false;
                    }
                })
            },
            //点击修改角色时显示的对话框
            beginUpdate(roleid) {
                axios.get("/role/getByRoleId?roleid=" + roleid).then(resp => {
                    if (resp.data.code === 200) {
                        this.updateForm = resp.data.data;
                        this.dialogVisibleUpdate = true;
                    }
                })
            },
            //确认修改角色
            okUpdate() {
                this.$refs.updateForm.validate((valid) => {
                    if (valid) {
                        axios.post("/role/update", this.updateForm).then(resp => {
                            if (resp.data.code === 200) {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                this.dialogVisibleUpdate = false;
                                this.selectByPage();
                            }
                        })
                    }
                })
            },
            //删除角色
            deleteRole(roleid) {
                this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/role/delete?roleid=" + roleid).then(resp => {
                        if (resp.data.code === 200) {
                            this.$message({
                                message: '删除成功',
                                type: 'success',
                            })
                            this.selectByPage();
                        }
                    })
                })
            },
            //刷新
            refresh() {
                //刷新成功，显示提示并返回到第一页
                this.$message({
                    message: '刷新成功',
                    type: 'success'
                });
                this.currentPage = 1;
                this.selectByPage();
            },
            //表单重置
            closeAdd() {
                this.$refs.addForm.resetFields();
            },
        }
    })
</script>
</html>
